<template>
  <div class="container">
    <el-table :data="studentList" style="width: 100%">
      <el-table-column label="学号" width="180" prop="studentId" align="center"/>
      <el-table-column label="姓名"  prop="studentName" align="center"/>
      <el-table-column label="性别"  prop="gender" align="center"/>
      <el-table-column label="出生日期" align="center">
        <template #default="scope">
          <!--{y}-{m}-{d} {h}:{i}:{s} 分别代表：年-月-日 时:分:秒-->
          {{ parseTime(scope.row.birthDate, "{y}-{m}-{d} {h}:{i}:{s}") }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="phone" align="center"/>
      <el-table-column label="住址"  prop="address" align="center"/>
      <el-table-column label="班级名称"  prop="className" align="center"/>

      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

  </div>
</template>
<script setup>
// 引入访问后台的js代码
import {listStudents} from "@/api/student/student";
import {parseTime} from "../../../utils/ruoyi.js";
// 定义分页参数
const data = reactive({
  queryParams: {
    pageNum: 1,       // 当前页
    pageSize: 10,     // 每页大小
  },
})
const total = ref(0)
// 将分页参数转换为ref对象
const { queryParams } = toRefs(data)
// 1. 定义学生信息列表
const studentList = ref([])
// 2. 编辑学生信息
const handleEdit = (index, row) => {
  console.log(index, row)
}
// 3. 删除学生信息
const handleDelete = (index, row) => {
  console.log(index, row)
}

// 4. 查询所有学生信息
function getList() {
  listStudents(queryParams.value).then(response => {
    studentList.value = response.rows
    total.value = response.total
  })
}

getList()
</script>
<style scoped lang="scss">
  .container {
    padding: 20px;
  }
</style>
